<template>
    <div>
        <a-modal
         class="batch-modal"
         :visible="batchVisibleShow" 
         title="批量办理"
         :destroyOnClose="true"
         @cancel="batchVisibleShow = false"
         >
            <a-spin size="large" :spinning="spinning">
                <a-form
                ref="form"
                layout="inline" 
                :form="form" 
                >
                    <a-form-item label="办理意见" class="comments-or-reasons-box">
                        <a-textarea
                            ref="opinionsRef"
                            style="width: 100% !important;"
                            @focus="ideaFocusEvent" @blur="ideaBlur" @click="ideaClick('办理意见','opinion')" placeholder="请输入办理意见" :rows="4" 
                            v-decorator="['opinion',{ initialValue:formState.opinion, rules: rules.opinion}]"
                            />
                    </a-form-item>
                    <a-form-item label="下个环节" >
                        <span style="padding-right: 30px;">{{formState.nextNode}}</span>短信通知<a-checkbox style="margin-left: 10px;" v-model:checked="formState.smgflag"></a-checkbox>
                    </a-form-item>
                    <a-form layout="inline" style="display: flex;justify-content: center;padding-top: 20px;" >
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" @click="segmentSubmitClick" >提交</a-button>
                        </a-form-item>
                    </a-form>
                </a-form>
                <a-modal
                    :title="ideaType"
                    v-model:visible="ideaVisible"
                    @ok="ideaHandleOk"
                    class="idea-modal-box"
                    @cancel="ideaVisible = false"
                >
                    <a-form layout="inline">
                        <a-form-item :label="ideaType" class="pull-input-w">
                            <div style="display: flex;align-items: center;">
                                <vxe-textarea
                                style="flex: 1;"
                                rows="3" 
                                @focus="recordCommentsFocus" 
                                @blur="recordCommentsBlur" 
                                @change="recordCommentsChange"  
                                v-model="opinionsText" 
                                :placeholder="'请输入或选择'+ideaType"
                                suffix-icon="vxe-icon-search"></vxe-textarea>
                                <a-button style="margin-left: 15px;" class="blue-btn"  type="primary" @click.stop="saveComments" >保存</a-button>
                            </div>
                            <!-- <vxe-input
                            @focus="recordCommentsFocus" 
                            @blur="recordCommentsBlur" 
                            @change="recordCommentsChange"  
                            v-model:value="opinionsText" 
                            :placeholder="'请输入或选择'+ideaType" 
                            suffix-icon="vxe-icon-search"></vxe-input> -->
                            <div class="opinion-record-box" v-show="isRecordComments">
                                <div v-if="segOpinionsList.length" class="content-box">
                                    <div v-for="(item,index) in segOpinionsList" class="content-for">
                                        <div @click.stop="selectIdea(item)"  class="content-item">
                                            <span class="content-text" v-if="ideaType=='办理意见'" >{{ item.fcontent}}</span>
                                            <span class="content-text" v-else >{{ item.fzdnr}}</span>
                                            <!-- item.fzdnr -->
                                            <a-button class="red-btn" size="small" type="primary" @click.stop="deleteIdea(item,'办理意见')" >删除</a-button>
                                        </div>
                                    </div>
                                </div>
                                <div class="no-data-box" v-else>暂无记录！</div>
                            </div>
                        </a-form-item>
                    </a-form>
                </a-modal>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import { deleteBatchIdeaServe, handlingOpinionsListServe, batchSubmitFlow, saveFlow, submitFlow, returnUpperFlowJob } from './service/index'
export default {
    components:{

    },
    props:{
        batchData:{
            type:[Array,Object],
            default: () => {},
            required:false
        }
    },
    data(){
        return{
            spinning:true,
            batchVisibleShow:false,
            form:this.$form.createForm(this, { name: 'coordinated' }),
            ideaVisible:false,
            opinionsText:'',
            ideaType:'',
            segOpinionsList:[],
            isRecordComments:false,
            formFieldKey:'',
            compSelectorkey:null,
            rules:{
                opinion: [{
                    required: true,
                    message: '请输入办理意见',
                    trigger: 'blur',
                }],
            },
            formState:{}
        }
    },
    watch:{
        batchData:{
            handler (newval, oldVal) {
                this.spinning = true
                this.formState = {...newval}
            },
            deep: true
        }
    },
    mounted(){
        
    },
    updated(){
        this.cancelLoading()
    },
    methods:{
        cancelLoading(){
            let timer = setInterval((val)=>{
                this.spinning = false
                clearInterval(timer);
            },500)
            
        },
        getHandlingOpinionsList(ideaType,val){//查询业务类型
            if(ideaType == '办理意见'){
                handlingOpinionsListServe({ftype1:ideaType,pageNo:1,pageSize:1000,fcontent:val,fywflcode:this.formState.fywflcode}).then(res=>{
                    if(res.code == 200){
                        //console.log('办理意见',res)
                        this.segOpinionsList = res.result.records
                    }
                })

            }else{
                queryListYwflServe({ftype1:ideaType,fzdnr:val}).then(res=>{
                    if(res.code == 200){
                        //console.log('查询弹窗数据',res)
                        this.segOpinionsList = res.result
                    }
                })
            }
            
        },
        //弹窗输入框输入
        recordCommentsChange(){
            this.getHandlingOpinionsList(this.ideaType,this.opinionsText)
        },
        //选择弹窗选择
        selectIdea(val){
            this.opinionsText = val.fcontent
            this.isRecordComments = false
        },
        recordCommentsFocus(){
            this.isRecordComments = true
        },
        recordCommentsBlur(){},
        
        //删除意见
        deleteIdea(val,name){
            if(this.ideaType == '办理意见'){
                deleteBatchIdeaServe({ids:val.id,fywflcode:this.formState.fywflcode}).then(res=>{
                    if(res.code == 200){
                        this.refreshFunction(name)
                        this.$message.success('删除成功')
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
            // else{
            //     spcyRsYwzdxxDeleteServe({id:val.id}).then(res=>{
            //         if(res.code == 200){
            //             this.refreshFunction(name)
            //             this.$message.success('删除成功')
            //         }else{
            //             this.$message.warning(res.message)
            //         }
            //     })
            // }
            
        },
        ideaHandleOk(){
            this.ideaVisible = false
            // if(this.opinionsText !== this.formField[this.formFieldKey]){
                
                
                this.formState[this.formFieldKey] = this.opinionsText
                if(this.formFieldKey == 'opinion'){
                    this.form.setFieldsValue({
                        opinion:this.opinionsText,
                    });
                }
                
            // }
            
            
            
        },
        saveComments(){
            this.ideaHandleOk()
            if(this.opinionsText){
                if(this.ideaType == '办理意见'){
                    addBatchIdeaServe({ftype1:this.ideaType,fcontent:this.opinionsText,fywflcode:this.formState.fywflcode}).then(res=>{
                        this.getHandlingOpinionsList(this.ideaType,this.opinionsText)
                    })
                }
            }
        },
        ideaFocusEvent(){
            // this.ideaBlur()
            this.$nextTick(()=>{
                this.ideaBlur()
            })
        },
        ideaBlur(){},
        //打开弹窗
        ideaClick(val,name){
            this.ideaVisible = true
            this.formFieldKey = name
            this.ideaType = val
            this.opinionsText = this.formState[name]
            this.getHandlingOpinionsList(val,this.formState[name])
        },
        segmentSubmitClick(){//提交
            this.form.validateFields((err, values) =>{
                if(!err){
                    let data = {
                        opinion:values.opinion,
                        jobids:this.formState.jobids,
                        smgflag:this.formState.smgflag?'是':'否',
                    }
                    batchSubmitFlow(data).then(res=>{
                        if(res.code == 200){
                            this.$message.success(res.message)
                            this.batchVisibleShow = false
                            this.$emit('success')
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }
            })
        },
    }
}
</script>
<style lang="less" scoped>
.idea-modal-box{
    .ant-modal-content{
        width: 700px !important;
    }
    .ant-modal-body{
        min-height: 500px !important;
    }
    .pull-input-w{
        width: 100%;
        .ant-form-item-control-wrapper{
            width: 85% !important;
        }
    }
}
//意见记录
.opinion-record-box{
    width: 447px;
    display: flex;
    overflow-y: auto;
    border: 1px solid rgb(233 228 228);
    box-shadow: -1px 25px 20px rgb(233 228 228);
    .content-box{
        width: 100%;
        height: 320px;
        .content-for{
            border-bottom: 1px solid rgb(233 228 228);
            display: flex;
            flex: 1;
            width: 100%;
            .content-item{
                width: 100%;
                padding: 10px 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .content-text{
                    
                }
            }
        }
    }
    .no-data-box{
        width: 100%;
        display: flex;
        padding-right: 20px;
        text-align: center;
        justify-content: center;
        height: 100px;
        line-height: 80px;
    }
    
}

.batch-modal .ant-modal-header{
    display: block !important;
 }

 .batch-modal .ant-modal-content{
    height: auto;
    overflow: auto;
 }
</style>
<style lang="less">
.comments-or-reasons-box{
    .ant-form-item-control-wrapper{
        width: 320px !important;
    }
}
.batch-modal .ant-modal-footer{
    display: none !important;
 }
</style>